<style scoped>
.img{width: 100%;}
</style>
<template>
  <form_param :readonly="false" :config="form_config" @change="on_change" ></form_param>
</template>

<script>
import s94 from "s94-js";
import form_param from "@/components/form_param.vue"
import {img_handle} from "@/js/s94_tool.js";

export default {
  components: {form_param},
  data(){
    return {
      test_value: "#fff555",
      date: '2024-02-05',
      form_config: this.get_form_config(),
    }
  },
  methods:{
    get_form_config(){
      let option_config = '全部|0,选项1|1[选项11|11[选项112|112,选项113|113],选项12|12,选项13|13],选项2|2[选项21|21,选项22|22],选项3|3[选项31|31,选项32|32,选项33|33]';
      let option_config1 = '全部|0,选项1|1,选项2|2,选项3|3'
      let value = '112';
      let value_address = '{"type":1,"name":"总店","phone":"13594543469","address":"石柱南路天骄2栋","area_id":2429,"area_name":"重庆市,石柱土家族自治县"}';
      let config = {
        hidden: {name:"hidden", label:"隐藏", type:"hidden", config:"", value:value, tips:"提示信息"},
        text_one: {name:"text_one", label:"单行文本", type:"text_one", config:"", value:value, tips:"提示信息"},
        text_one2: {name:"text_one2", label:"密码", type:"text_one", config:"password", value:value, tips:"提示信息"},
        text_one3: {name:"text_one3", label:"数值", type:"text_one", config:"number", value:value, tips:"提示信息"},
        text_one4: {name:"text_one4", label:"颜色", type:"text_one", config:"color", value:value, tips:"提示信息"},
        text_more: {name:"text_more", label:"多行文本", type:"text_more", config:{maxlength:255}, value:value, tips:"提示信息"},
        editor: {name:"editor", label:"编辑器", type:"editor", config:'', value:value, tips:"提示信息"},
        select_one: {name:"select_one", label:"下拉单选", type:"select_one", config:option_config, value:value, tips:"提示信息"},
        radio: {name:"radio", label:"单选", type:"radio", config:option_config, value:"0", tips:"提示信息"},
        checkbox: {name:"checkbox", label:"多选", type:"checkbox", config:option_config, value:"0", tips:"提示信息"},
        radio_switch: {name:"radio_switch", label:"开关", type:"radio_switch", config:"", value:"1", tips:"提示信息"},
        address: {name:"address", label:"地址", type:"select_address", config:"", value:value_address, tips:"提示信息"},
        file: {name:"file", label:"文件", type:"file", config:"jpg", is_image:true, value:"http://mmbiz.qpic.cn/mmbiz_jpg/Gt1ibmdWFkeoMfTz89H2C8hJlPtuTaek2lGY72u5hJ4Wc5feCC92MnGwWrudzibpjia3Jl8rGliaspiaPlKsYrJcwOw/0.jpg?from=appmsg", tips:"提示信息"},
        file_imgs: {name:"file_imgs", label:"多图", type:"file_imgs", config:"", value:value, tips:"提示信息"},
        file_img: {name:"file_img", label:"图片", type:"file_img", config:"png,jpg,pdf", value:value, tips:"提示信息"},
        date: {name:"date", label:"日期", type:"date", config:"", value:value, tips:"提示信息"},
        sku: {name:"sku", label:"规格", type:"sku", config:"goods:416", value:value, tips:"提示信息"},
      };

      Object.keys(config).forEach(k=>{
        // config[k]["align"] = "right";
        // config[k]["is_info"] = "right";
      })
      return config;
    },
    on_change(v){
      console.log(v);
    },
    submit(e){
      let data = s94.param_encode(new FormData(e.target));
      console.log(s94.param_decode(data));
    },
    change_file(e){
      let file = e.target.files[0];

      img_handle(file, {width:1000, height:1000, fit:'scale-down', blank:'cut'}).then((src)=>{
        this.$refs.img.src = src;
      })
    },
  },
  computed:{},
  mounted(){

  }
}
</script>